<template>
  <div>
    <div class="banner-content home-banner">
      <el-image
        lazy
        src="https://www.feslion.com/picture/serbanner.jpg"
        alt=""
      />
    </div>
    <div class="officialweb-container-center">
      <div class="content">
        <div class="flex">
          <img class="earth" src="@/assets/images/product/earth.jpg" alt="" />
          <div class="info">
            <div class="titles">服务永无止境</div>
            <div class="sus">
              首家供应链综合服务型物流<br />
              企业提供干仓配一体化服务
            </div>
          </div>
        </div>
        <div class="flex">
          <img class="train" src="@/assets/images/product/train.jpg" alt="" />
          <div class="info">
            <div class="titles">责任成就价值</div>
            <div class="sus">
              大力发展相关配套需求的规模，<br />
              满足广大用户时效性需求
            </div>
          </div>
        </div>
      </div>
      <div class="title">我们的服务</div>
      <div class="sub">OUR SERVICES</div>
      <div class="servers">
        <!-- <div class="box" v-for="item in 6" :key="item"> -->
        <el-image
          v-for="item in 6"
          :key="item"
          fit="fill"
          class="product-imgs"
          lazy
          :src="'https://www.feslion.com/picture/server_' + item + '.jpg'"
        />
        <!-- </div> -->
      </div>
      <div class="title mt124">增值服务</div>
      <div class="sub">OUR SERVICES</div>
      <div class="servers mb88">
        <el-image
          v-for="item in 8"
          :key="item"
          fit="fill"
          class="product-imgs"
          lazy
          :src="'https://www.feslion.com/picture/add_serve_' + item + '.jpg'"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
// import Footer from "@/layout/components/Footer";
const datas = reactive({
  products: [],
});
</script>

<style scoped lang="scss">
.content {
  margin: 60px auto 124px;
  display: flex;
  justify-content: space-around;
  .earth {
    width: 167px;
    height: 173px;
  }
  .train {
    width: 256px;
    height: 146px;
  }
  .info {
    margin-left: 38px;
    .titles {
      font-family: MiSans-Medium;
      font-size: 29px;
      // line-height: 38px;
      letter-spacing: 1px;
      color: #333333;
    }
    .sus {
      width: 100%;
      font-family: MiSans-Light;
      font-size: 24px;
      // line-height: 35px;
      letter-spacing: 1px;
      margin-top: 24px;
      color: #333333;
    }
  }
}
.servers {
  margin-top: 47px;
  // padding: 0 30px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 calc((100% - 1064px) / 2);
  .product-imgs {
    width: 266px;
    height: 264px;
    margin: 0;
    padding: 0;
  }
}
.mt124 {
  margin-top: 124px;
}

.mb88 {
  margin-bottom: 88px;
}
.title {
  text-align: center;
  color: #333333;
  font-size: 49px;
  // font-family: MiSans-Semibold;
  font-weight: 800;

  text-align: center;
  letter-spacing: 1px;
}
.sub {
  text-align: center;
  font-family: MiSans-Medium;
  font-size: 18px;
  margin-top: 18px;
  color: #333333;
  letter-spacing: 0px;
}
</style>
